<template>
  <view
    style="
      background-color: #181816;
      height: 100%;
      padding-bottom: 60rpx;
      box-sizing: border-box;
    "
  >
    <view class="navbar" v-show="false">
      <!-- <u-navbar
        bgColor="#000"
        leftIconColor="#fff"
        :autoBack="true"
        back-text="返回"
        title="首页"
      ></u-navbar> -->
    </view>
    <!-- 头部导航栏固定 -->
    <view class="header">
      <view class="header_box">
        <!--头部标题-->
        <view
          class="header_title"
          style="background-color: #181816; letter-spacing: 2rpx;"
        >
          <image src="/static/title.png" mode="aspectFit" />
        </view>
        <!-- 消息通知 -->
        <view class="header_message" @tap="noticeCenter()">
          <image src="/static/message.png"></image>
        </view>
      </view>
    </view>

    <view class="content">
      <!-- 轮播图 -->
      <view class="swiper_box">
        <!-- 暂时是个图片展示 -->

        <swiper
          class="swiper"
          circular
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item
            class="swiper-item"
            v-for="(res, index) in banner_list"
            :key="index"
          >
            <image :src="res.image_url"></image>
          </swiper-item>
        </swiper>
      </view>
      <!-- <view style="color: aqua;" @click="opens">点击</view> -->
      <!-- 公告 -->
      <view class="latest_notice">
        <view class="title">
          <image src="/static/notice.png" mode="aspectFit" />
        </view>
        <scroll-view class="notice_box">
          <!-- 轮播文字 -->
          <swiper
            class="notice_title"
            circular
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            :vertical="vertical"
          >
            <swiper-item
              class="notice_item"
              v-for="(res, index) in notice_list"
              :key="index"
            >
              <text @tap="noticeDetail(res.notice_id)">{{ res.title }}</text>
            </swiper-item>
          </swiper>
        </scroll-view>
        <view class="notice_btn" @click="noticeCenter()">
          <image src="../../static/notice_right.png"></image>
        </view>
      </view>
      <!-- 滑块选择 -->
      <view class="switch_block">
        <view
          :class="[
            { active: active == index },
            { left: active == 0 },
            { right: active == 1 },
            `item`,
          ]"
          @click="blockClick(index)"
          v-for="(item, index) in data"
          :key="index"
        >
          {{ item }}
        </view>
      </view>
      <!-- 活动列表 -->
      <view v-show="activityList" class="content-list">
        <!-- 静态 -->
        <view
          class="content_box"
          v-for="(res, index) in activity_list"
          :key="index"
        >
          <!-- 活动封面图 -->
          <view
            class="content_img"
            @click="seriesDetails(res.activity_id, res.collect_id, index, res)"
          >
            <image :src="res.series.cover"></image>
          </view>
          <!-- 活动文字介绍 -->
          <view class="content_text">
            <!-- 活动名 -->
            <view class="content_title">{{ res.name }}</view>
            <!-- 活动数量，发行方式 -->
            <view class="content_countBox">
              <!-- 活动下藏品数量 -->
              <view class="count">
                <!-- 图标 -->
                <image src="../../static/count_icon.png"></image>
                <!-- 总份数 -->
                <view class="total">限量{{ res.total_show_number }}份</view>
                <!-- 共几款 -->
                <view class="models">共{{ res.total_collect }}款</view>
              </view>
              <!-- 活动发行类型（字的长度可能不同） -->
              <view class="types">{{ res.flag }}</view>
            </view>
            <!-- 发行商 -->
            <view class="content_host">
              <view class="host_logo">
                <image :src="res.brand_info.icon_image"></image>
              </view>
              <text>{{ res.brand_info.brand_name }}</text>
            </view>
          </view>
          <!-- 查看活动详情 -->
          <view
            class="content_btn"
            @click="seriesDetails(res.activity_id, res.collect_id, index, res)"
            v-show="!res.is_end"
          >
            <button>立即查看</button>
          </view>
          <!-- 已结束 -->
          <view
            class="end_btn"
            @click="seriesDetails(res.activity_id, res.collect_id, index, res)"
            v-show="res.is_end"
          >
            <button>已结束</button>
          </view>
        </view>
        <!-- 水印 -->
        <view class="watermark">
          <image
            src="../../static/zxl_yde.png"
            style="width: 100%; height: 100%;"
          ></image>
        </view>
        <!-- 动态数据 -->
      </view>

      <!-- 发行预告 -->
      <view v-show="advanceNotice" class="content-list">
        <view
          class="advance_list"
          v-for="(res, index) in advance_list"
          :key="index"
          @click="seriesDetails(res.activity_id, res.collect_id, index, res)"
        >
          <view class="advance_box">
            <!-- 定位预告发行时间 -->
            <view class="advance_time">
              {{ res.begin_time_more }}
            </view>
            <!-- 预告内容 -->
            <view class="advance_content">
              <view class="advance_img">
                <image :src="res.series.cover"></image>
              </view>
              <view class="advance_text">
                <!-- 活动名 -->
                <view class="content_title">{{ res.name }}</view>
                <!-- 活动数量，发行方式 -->
                <view class="content_countBox">
                  <!-- 活动下藏品数量 -->
                  <view class="count">
                    <!-- 图标 -->
                    <image src="../../static/count_icon.png"></image>
                    <!-- 总份数 -->
                    <view class="total">限量{{ res.total_show_number }}份</view>
                    <!-- 共几款 -->
                    <view class="models">共{{ res.total_collect }}款</view>
                  </view>
                  <!-- 活动发行类型（字的长度可能不同） -->
                </view>
                <view class="types">{{ res.flag }}</view>
                <!-- 发行商 -->
                <view class="content_host">
                  <view class="host_logo">
                    <image :src="res.brand_info.icon_image"></image>
                  </view>
                  <text>{{ res.brand_info.brand_name }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 水印 -->
        <view
          class="watermark"
          style="
            width: 34%;
            height: 48rpx;
            padding: 80rpx 0 100rpx 0;
            margin: auto;
          "
        >
          <image
            src="../../static/zxl_yde.png"
            style="width: 100%; height: 100%;"
          ></image>
        </view>
      </view>
    </view>
    <!-- 未登录情况的提示栏固定 -->
    <view class="fixed_tabbar" v-show="!hasLogin">
      <view class="content">
        <view class="notice_text">
          <text class="isLogin" v-show="isLogin">
            *您还未登录，暂无法参与活动
          </text>
          <text class="isVerify" v-show="isVerify">
            *按国家合规要求,实名认证后可使用区块链服务
          </text>
        </view>
        <view class="method_btn">
          <button v-show="isLogin" @click="Login()">登录</button>
          <button v-show="isVerify" @click="Verify()">实名认证</button>
        </view>
      </view>
    </view>

    <!-- H5登录弹窗 -->
    <u-popup
      :show="showLogin"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    >
      <view class="showLoginMask">
        <view class="title">参与活动请登录</view>
        <view class="input">
          <view class="phone">
            <select>
              <option>+86</option>
              <option>+851</option>
            </select>
            <input
              type="number"
              v-model="mobile"
              placeholder-style="font-size:26rpx"
              maxlength="11"
              placeholder="请输入手机号"
            />
            <button @click="getVerify()">
              {{ !captchaTime ? '发验证码' : captchaTime + 's' }}
            </button>
          </view>
          <view class="code">
            <view style="letter-spacing: 3rpx; width: 120rpx;">验证码</view>
            <input
              type="number"
              v-model="verifycode"
              maxlength="4"
              placeholder-style="font-size:26rpx"
              placeholder="请输入验证码"
            />
          </view>
        </view>
        <view class="submit_btn" @click="submit">
          <button>登录</button>
        </view>
        <!-- <view
          class="register"
          @click="Register()"
          style="
            width: 30%;
            text-align: center;
            font-size: 24rpx;
            color: #999999;
            margin: 30rpx auto;
          "
        >
          <text></text>
          注册
        </view> -->
        <view class="agree_read">
          <label class="radio">
            <radio-group @change="onAgree">
              <radio value="1" :checked="checked" @tap="Checked()"></radio>
            </radio-group>
          </label>
          已阅读并同意
          <text @tap="userAgreement()">《用户协议》</text>
          和
          <text @tap="privacyAgreement()">《隐私保护指引》</text>
        </view>
      </view>
    </u-popup>
    <!-- 注册弹窗 -->
    <u-popup
      :show="showRegister"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    >
      <view class="showRegisterMask">
        <view
          class="header_img"
          style="width: 333rpx; height: 333rpx; margin: auto;"
        >
          <image
            style="width: 100%; height: 100%;"
            src="/static/qrcode.jpg"
          ></image>
        </view>
        <view class="content_text">
          该手机号未注册，请搜索
          <text style="font-weight: bold; color: #333333;">“卯时数字平台”</text>
          小程序或识别二维码后，进入‘我的’页面注册并完成实名认证。
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from '@/request/api.js'
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'
export default {
  data() {
    return {
      /* swiper */
      indicatorDots: true,
      autoplay: true,
      interval: 3500,
      duration: 500,
      vertical: true, //滑动方向是否为纵向
      /* 选择块 */
      active: 0,
      activityList: true,
      advanceNotice: false,
      data: ['精选推荐', '发售预告'],
      /* screen */
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      /* 活动列表 */
      activity_list: [],
      /* banner列表 */
      banner_list: [],
      /* 最新通告列表 */
      notice_list: [],
      /* 预告列表 */
      advance_list: [],
      is_end: false,
      /* 登录 */
      mobile: '',
      verifycode: '',
      /* 底部提示 */
      login: true,
      verify: false,
      isLogin: true,
      hasLogin: false,
      isVerify: false,
      /* 弹窗 */
      showLogin: false,
      showRegister: false,
      src: 'http://publish.onedaen.com',
      captchaTime: 0, //验证码倒计时
      agreeValue: '', //同意协议
      infos: {},
      ua: false,
      openid: '',
      page: 1,
      checked: false,
      launch: false,
    }
  },
  onShow() {
    /* 验证是否登录 */
    let hasLogin = uni.getStorageSync('hasLogin')
    this.hasLogin = hasLogin
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    console.log(this.hasLogin)
    if (hasLogin == false) {
      this.isLogin = true
    } else if (hasLogin == true && info.is_auth == 1) {
      console.log(111)
      this.isVerify = true
      this.hasLogin = false
      this.isLogin = false
    }
    if (!this.launch) return
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 发售平台',
      desc: '专注数字资产发行赋能传统经济',
      link: url,
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
  },
  onLoad() {
    const ua = window.navigator.userAgent.toLowerCase()
    this.ua = ua.match(/MicroMessenger/i) == 'micromessenger'
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      //是
      this.pageLoad()
    } else {
      //不是
    }
    /* 验证是否登录 */
    let hasLogin = uni.getStorageSync('hasLogin')
    this.hasLogin = hasLogin
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    console.log(this.hasLogin)
    if (hasLogin == false) {
      this.isLogin = true
    } else if (hasLogin == true && info.is_auth == 1) {
      console.log(111)
      this.isVerify = true
      this.hasLogin = false
      this.isLogin = false
    }
    /* 进入首页渲染页面 */
    this.page = 1

    this.index()
  },
  /* 下拉刷新 */
  onPullDownRefresh() {
    let _this = this
    this.page = 1
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.index()
      this.Advance()
    }, 500)
  },
  mounted() {
    this.launch = true
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 发售平台',
      desc: '专注数字资产发行赋能传统经济',
      link: url,
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
  },
  methods: {
    async configSDK(url, { title, desc, link, imgUrl }) {
      // const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            // desc: this.activity_detail.description, // 分享描述
            desc,
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              // 设置成功
              console.log('设置成功')
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              console.log('设置成功')
              // 设置成功
            },
          })
        })
      })
    },
    opens() {
      let h5URL =
        'publish.onedaen.com//uploads/material/22-12-27/167211237958974.mp3'
      let path = window.location.protocol + '//' + h5URL
      window.location.href = path
    },
    /* 弹窗开关 */
    open() {
      // console.log('open');
    },
    close() {
      this.showLogin = false
      this.showRegister = false
      // console.log('close');
    },
    // 勾选同意协议
    onAgree(e) {
      this.agreeValue = e.detail.value
    },
    Checked() {
      let check = this.checked
      if (check) {
        this.checked = false
      } else {
        this.checked = true
      }
    },
    /* 块选择 */
    blockClick(id) {
      /* 微信小程序v-show里面不能写表达式判断 */
      this.active = id
      if (id == 0) {
        console.log(id)
        this.page = 1
        this.activityList = true
        this.advanceNotice = false
        /* 请求精彩推荐接口 */
        this.index()
      } else if (id == 1) {
        this.page = 1
        console.log(id)
        /* 请求发布预告接口 */
        // this.notice()
        setTimeout(() => {
          this.activityList = false
          this.advanceNotice = true
        }, 200)
        this.Advance()
      }
    },
    /* 消息中心 */
    noticeCenter() {
      uni.navigateTo({
        url: '../message/notice',
      })
    },
    /* 消息详情页 */
    noticeDetail(id) {
      uni.navigateTo({
        url: '../message/notice_detail?id=' + id,
      })
    },
    /* 用户登录实名状态 */
    //登录
    Login() {
      this.showLogin = true
    },
    submit() {
      let openid = uni.getStorageSync('openid')
      if (!this.open) {
        this.openid = openid
      }
      console.log(openid)
      if (!this.agreeValue) {
        uni.showToast({
          title: '请先勾选！',
          icon: 'error',
        })
        return
      } else {
        if (!this.verifycode) {
          uni.showToast({
            title: '验证码不能为空',
            icon: 'none',
          })
        } else {
          api
            .submitLogin({
              mobile: this.mobile,
              code: this.verifycode,
              openid: openid,
            })
            .then((res) => {
              console.log(res)
              if (res.code == false) {
                uni.showToast({
                  title: res.message,
                  icon: 'error',
                })
              } else {
                this.showLogin = false
                uni.showToast({
                  title: '登录成功！',
                })
                this.mobile = ''
                this.verifycode = ''
                this.hasLogin = true
                uni.setStorageSync('hasLogin', true)
                uni.setStorage({
                  key: 'userInfo',
                  data: {
                    nickName: res.data.nickname,
                    avatarUrl: res.data.avatar,
                    token: res.data.token,
                    is_auth: res.data.is_auth,
                    uid: res.data.uid,
                    mobile: res.data.mobile,
                    update_time: res.data.update_time,
                    nft_address: res.data.nft_address,
                  },
                  complete: (res) => {
                    console.log(res)
                  },
                })
              }
            })
        }
      }
    },
    // 注册
    Register() {
      this.showLogin = false
      this.showRegister = true
    },
    getVerify() {
      /* 手机号验证 */
      let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if (!this.mobile) {
        //判断如果手机号为空，提示用户输入手机号
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        })
        return
      } else if (!reg.test(this.mobile)) {
        //判断手机号格式时候正确
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
        })
        return
      } else {
        // 获取验证码
        api
          .getVerifyCode({
            mobile: this.mobile,
          })
          .then((res) => {
            console.log(res)
            if (res.code == true) {
              this.captchaCountdown()
            } else {
              this.captchaCountdown()
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    //验证码倒计时
    captchaCountdown() {
      console.log(555)
      if (this.captchaTime > 0) {
        uni.showToast({
          title: '不能重复获取',
          icon: 'none',
        })
        return
      } else {
        this.captchaTime = 60
        let timer = setInterval(() => {
          this.captchaTime--
          console.log(this.captchaTime)
          if (this.captchaTime < 1) {
            clearInterval(timer)
            this.captchaTime = 0
          }
        }, 1000)
      }
    },

    //实名
    Verify() {
      uni.navigateTo({
        url: '/pages/verify/verify',
      })
    },
    // radio选中
    agreeRadio(e) {
      console.log(e)
      this.agreeValue = e.detail.value
    },
    /* 接口请求 */
    //首页
    index() {
      /* 验证是否登录 */
      // this.hasLogin = uni.getStorageSync('hasLogin')
      // console.log(this.hasLogin)
      api
        .getIndex({
          page: this.page,
        })
        .then((res) => {
          console.log('首页信息接口返回:', res)
          if (!res.data.activity_info.data.length == 0 && this.page == 1) {
            this.activity_list = res.data.activity_info.data
          } else if (
            !res.data.activity_info.data.length == 0 &&
            this.page > 1
          ) {
            let more = res.data.activity_info.data
            for (let i = 0; i < more.length; i++) {
              this.activity_list.push(more[i])
            }
          }
          this.notice_list = res.data.notice_info
          this.banner_list = res.data.banner_info
          this.is_end = res.data.is_end
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 发行预告
    Advance() {
      api
        .getIndex({
          page: this.page,
          is_preview: 1,
        })
        .then((res) => {
          console.log('发行返回:', res)
          if (!res.data.activity_info.data.length == 0 && this.page == 1) {
            this.advance_list = res.data.activity_info.data
          } else if (
            !res.data.activity_info.data.length == 0 &&
            this.page > 1
          ) {
            let more = res.data.activity_info.data
            for (let i = 0; i < more.length; i++) {
              this.advance_list.push(more[i])
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    /* 下拉刷新 */
    onPullDownRefresh() {
      let _this = this
      this.page = 1
      setTimeout(() => {
        uni.stopPullDownRefresh()
        this.index()
        this.Advance()
      }, 500)
    },
    // 触底翻页
    onReachBottom() {
      this.page = this.page + 1
      /* 开始请求数据 */
      this.index()
      this.Advance()
    },
    // 跳转活动详情
    seriesDetails(acticity_id, collection_id, index, res) {
      // console.log('jump', this.activity_list, 'index', index)
      let total_collection = res.total_collect
      if (total_collection > 1) {
        uni.navigateTo({
          url: '../details/series_detail?id=' + acticity_id,
        })
      } else {
        if (total_collection == 1 && !this.collection_id) {
          /* 带活动id，藏品id */
          uni.navigateTo({
            url:
              `../details/collection_detail?activity_id=` +
              acticity_id +
              `&collection_id=` +
              collection_id, //带参数给藏品详情
          })
        } else {
          uni.navigateTo({
            url: '../details/series_detail?id=' + acticity_id,
          })
        }
      }
    },
    /* 用户协议 */
    userAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user_agreement',
      })
    },
    /* 隐私协议 */
    privacyAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/privacy_agreement',
      })
    },
    collectionDetails() {
      uni.navigateTo({
        url: '../details/collection_detail',
      })
    },
    getCollection() {
      uni.navigateTo({
        url: '../details/get_collection',
      })
    },
    // 网页授权
    pageLoad(href) {
      let openid = uni.getStorageSync('openid')
      this.code = this.GetQueryString('code')
      if (!openid) {
        if (this.code) {
          //直接去登录发起请求
        } else {
          //获取code
          //静默授权
          this.getwx_authorize()
        }
        setTimeout(() => {
          this.getOpenid(this.code)
        }, 1000)
      }
    },
    // 获取openid
    getOpenid(code) {
      api
        .getSessionKey({
          js_code: code,
        })
        .then((res) => {
          console.log(res)
          let openid = res.data.h5openid
          if (!openid) {
          } else {
            this.openid = openid
            uni.setStorageSync('openid', openid)
          }
        })
    },
    //拉取授权
    getwx_authorize() {
      //授权的回调地址
      let redirect_uri = encodeURIComponent('https://h5.onedaen.com')
      //这是我们公众号的appid
      let appid = 'wxc169f5171f0ff8a6'
      //静默授权
      window.location.href =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
        appid +
        '&redirect_uri=' +
        redirect_uri +
        '&response_type=code&scope=snsapi_base&state=123#wechat_redirect' +
        '&t=' +
        new Date().getTime()
      //非静默授权调取下面的这个地址，弹出授权接口，获取到用户信息
      window.location.href =
        'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
        appid +
        '&redirect_uri=' +
        redirect_uri +
        '&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect' +
        '&t=' +
        new Date().getTime()
    },
    //获取url中参数的方法
    GetQueryString(name) {
      var url = window.location.href
      try {
        var cs = url.split('?')[1] //获取?之后的参数字符串
        var cs_arr = cs.split('&') //参数字符串分割为数组
        for (var i = 0; i < cs_arr.length; i++) {
          //遍历数组，拿到json对象
          if (cs_arr[i].split('=')[0] == name) {
            return cs_arr[i].split('=')[1]
          }
        }
        return null
      } catch {
        return null
      }
    },
    //登录 这里就是自己的接口函数了。
    async getLogin() {
      const res = await this.$api.post('自己的接口地址', {
        code: this.code,
        data: {},
      })
      console.log(res)
      if (res.status == 1) {
        uni.setStorageSync('token', res.result.token)
        uni.switchTab({
          url: '/pages/index/index',
        })
      } else {
        uni.showToast({
          title: res.message,
          icon: 'none',
          duration: 2000,
        })
      }
    },
    /* swiper方法 */
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay
    },
    intervalChange(e) {
      this.interval = e.target.value
    },
    durationChange(e) {
      this.duration = e.target.value
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #181816;
}

/* header */
.header {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #181816;
  color: #fff;
  z-index: 999;
  padding: 20rpx 0;

  .header_box {
    display: flex;
    justify-content: space-between;
    width: 685rpx;
    margin: auto;
    align-items: center;

    .header_title {
      width: calc(685rpx / 2);
      height: 60rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .header_message {
      width: 60rpx;
      height: 60rpx;
      background-color: #000000;
      border-radius: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* 轮播图 */
.swiper_box {
  //   width: 90%;
  width: 685rpx;
  margin: 0 auto 0 auto;

  // border-radius: 50rpx;
  // overflow: hidden;
  .swiper {
    height: 260rpx;
    transform: translateY(0); // 关键代码
    border-radius: 50rpx;
    overflow: hidden;
  }

  .swiper-item {
    display: block;
    height: 260rpx;
    line-height: 260rpx;
    text-align: center;

    image {
      width: 100%;
      height: 100%;
      // border-radius: 20rpx;
    }
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  /* #ifdef MP-WEIXIN */
  wx-swiper .wx-swiper-dot {
    width: 6rpx;
    height: 6rpx;
    border-radius: 100%;
  }

  wx-swiper .wx-swiper-dot-active {
    background-color: #fff;
    width: 20rpx;
    border-radius: 5rpx;
  }

  /* #endif */
  /* #ifdef H5 */

  /* #endif */
}

/* 最新通告 */
.latest_notice {
  position: relative;
  display: flex;
  vertical-align: middle;
  align-items: middle;
  width: 685rpx;
  margin: 47rpx auto 43rpx;
  height: 110rpx;
  background-color: #242424;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx 23rpx;

  .title {
    width: 70rpx;
    height: 65rpx;

    image {
      width: 70rpx;
      height: 65rpx;
    }

    // width: 74rpx;
    // // padding: 20rpx 25rpx;
    // line-height: 36rpx;
    // font-size: 33rpx;
    // font-style: italic;
    // font-weight: bold;
    // font-family: TTCHAOHEIJ;
    // letter-spacing: 0rpx;
    // color: transparent;
    // background-clip: text;
    // background-image: linear-gradient(360deg, #f0c611 0%, #4effff 100%);
  }

  .notice_box {
    width: 100%;
    margin-top: 18rpx;
    height: 38rpx;
    margin-left: 19rpx;
    border-left: 1.5rpx solid #4d4d4d;
    font-size: 28rpx;
    color: #a6a6a6;
    flex: 1;

    .notice_title {
      width: 100%;
      height: 100%;
    }
  }

  .notice_item {
    height: 30rpx;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 30rpx;

    text {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      //   width: 360rpx;
      width: 85%;
      padding-right: 50rpx;
    }
  }

  .notice_btn {
    image {
      position: absolute;
      right: 23rpx;
      //   right: 5%;
      //   top: 40rpx;
      width: 36rpx;
      height: 36rpx;
      transform: translateY(-50%);
      top: 50%;
    }
  }
}

/* 选择块 */
/* 选择块 */
.switch_block {
  display: flex;
  align-items: center;
  //   padding-right: 10%;
  color: $uni-text-color;
  background-color: #181816;
  //   width: 100%;
  width: 685rpx;
  margin: 0 auto;
  font-size: 33rpx;
  color: #b3b3b3;
  width: 685rpx;

  .active {
    font-size: 40rpx;
    color: #4effff;
    font-weight: 500;

    // padding: 0 20rpx;
    // background: transparent;
    // background-clip: padding-box, border-box;
    // background-origin: padding-box, border-box;
    // background-image: linear-gradient(135deg, #181816, #181816),
    //   linear-gradient(to left, #181816 25%, #4effff, #181816 75%);
    // border-bottom: 3px transparent solid;
    &::before {
      content: '';
      display: block;
      height: 8rpx;
      position: absolute;
      bottom: -9rpx;
      width: 95rpx;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(to right, #181816, #4effff, #181816);
      //   background: transparent;
      //   background-clip: padding-box, border-box;
      //   background-origin: padding-box, border-box;
      //   background-image: linear-gradient(135deg, #181816, #181816),
      //     linear-gradient(to left, #181816 25%, #4effff, #181816 75%);
    }
  }

  .item {
    position: relative;
    width: 180rpx;
    margin-right: 40rpx;

    text-align: center;
  }

  //   .left {
  //     margin-right: 60rpx;
  //   }

  //   .right {
  //     margin-left: 45rpx;
  //   }
}

/* 预告 */
.advance_list {
  padding: 25rpx 0;

  .advance_box {
    position: relative;
    width: 690rpx;
    box-sizing: border-box;
    height: fit-content;
    background-color: #282a2c;
    border-radius: 20rpx;
    margin: 30rpx auto 0;
    padding: 43rpx 20rpx 20rpx;
    /* 渐变效果 */
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(135deg, #282a2c, #282a2c),
      linear-gradient(to left, #282a2c, #4effff, #282a2c);
    border-top: 1px transparent solid;

    &:first-child {
      margin-top: 0;
    }

    .advance_time {
      border-radius: 4rpx;
      position: absolute;
      top: -20rpx;
      left: 205rpx;
      min-width: 280rpx;
      margin: auto;
      text-align: center;
      color: #4effff;
      font-size: 24rpx;
      line-height: 40rpx;
      /* 渐变效果 */
      background-color: #282a2c;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      z-index: 1;
      box-sizing: border-box;
      border: 1px #4effff solid;
    }

    .advance_content {
      display: flex;
      width: 100%;
      //   margin: auto;

      .advance_img {
        width: 250rpx;
        height: 250rpx;
        border-radius: 20rpx;
        min-width: 250rpx;
        border: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }

      .advance_text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        box-sizing: border-box;
        padding: 14rpx 0;
        .content_title {
          font-family: PingFang-SC-Medium;
          width: 360rpx;
          font-size: 36rpx;
          line-height: 100%;
          color: #ffffff;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          // margin: 0 0 25rpx;
        }

        /* 发行数量 */
        .content_countBox {
          display: flex;
          font-size: 24rpx;
          // margin-bottom: 20rpx;
          //   height: 40rpx;
          //   line-height: 40rpx;

          .count {
            display: flex;
            align-items: center;
            height: 40rpx;
            letter-spacing: 1rpx;
            background-color: #d3ae82;
            border: #d3ae82 2rpx solid;
            border-radius: 5rpx;

            image {
              margin: 6rpx 10rpx;
              width: 24rpx;
              height: 28rpx;
              line-height: 40rpx;
            }

            .total {
              text-align: center;
              height: 100%;
              // line-height: 40rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: bold;
            }

            .models {
              min-width: 80rpx;
              max-width: 150rpx;
              text-align: center;
              // line-height: 40rpx;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              // border-radius: 5rpx;
              margin-left: 10rpx;
              //   border: 1rpx solid #d3ae82;
              background-color: #181816;
              color: #d3ae82;
            }
          }
        }

        .types {
          // margin-bottom: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 12rpx;
          height: 42rpx;
          font-size: 24rpx;
          width: fit-content;
          text-align: center;
          background-image: linear-gradient(
              102deg,
              #d8a0d8 0%,
              #a4bbe5 41%,
              #cdffd7 100%
            ),
            linear-gradient(#181816, #181816);
          background-blend-mode: normal, normal;
          line-height: 38rpx;
          border-radius: 5rpx;
        }

        .content_host {
          display: flex;
          align-items: center;

          .host_logo {
            width: 50rpx;
            height: 50rpx;
            border-radius: 30rpx;
            border: 0;

            image {
              width: 100%;
              height: 100%;
              border-radius: 30rpx;
              border: 0;
            }
          }

          text {
            font-family: PingFang-SC-Medium;
            font-size: 26rpx;
            line-height: 60rpx;
            margin-left: 20rpx;
            color: #ccc;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.content {
  height: auto;
  padding-bottom: 80rpx;
  // margin-top: 80rpx;
  margin-top: 120rpx;

  .content-list {
    margin-top: 62rpx;
    width: 685rpx;
    margin: 62rpx auto 0;
    box-sizing: border-box;

    .content_box {
      width: 100%;
      height: auto;
      margin: auto;
      background-color: #282a2c;
      border-radius: 20rpx;
      margin-top: 30rpx;
      padding-bottom: 40rpx;

      &:first-child {
        margin-top: 0;
      }
    }
  }

  .content_img {
    width: 100%;
    height: 685rpx;
    margin: auto;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
  .content_text {
    margin-left: 35rpx;
    margin-top: 35rpx;

    /* 活动名 */
    .content_title {
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      font-weight: 500;
      letter-spacing: 0rpx;
      color: #ffffff;
      word-break: break-all;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    /* 发行数量 */
    .content_countBox {
      display: flex;
      font-size: 24rpx;
      margin-top: 35rpx;
      height: 38rpx;

      .count {
        display: flex;
        align-items: center;
        letter-spacing: 1rpx;
        background-color: #d3ae82;
        overflow: hidden;
        border-radius: 5rpx;
        border: 1rpx solid #d3ae82;
        box-sizing: border-box;
        height: 38rpx;
        image {
          margin: 6rpx 10rpx;
          width: 24rpx;
          height: 28rpx;
        }

        .total {
          text-align: center;
          margin-right: 7rpx;
          height: 35rpx;
          font-weight: bold;
        }

        .models {
          padding: 0 10rpx 0 10rpx;
          height: 35rpx;
          list-style: none;
          //   box-sizing: border-box;
          //   text-align: center;
          //   border-radius: 5rpx;
          //   margin-left: 10rpx;

          background-color: #181816;
          color: #d3ae82;
        }
      }

      .types {
        margin-left: 20rpx;
        padding: 0 12rpx;
        height: 38rpx;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(
            102deg,
            #d8a0d8 0%,
            #a4bbe5 41%,
            #cdffd7 100%
          ),
          linear-gradient(#181816, #181816);
        background-blend-mode: normal, normal;
        line-height: 38rpx;
        border-radius: 5rpx;
      }
    }

    /* 发行商 */
    .content_host {
      display: flex;
      margin-top: 35rpx;
      align-items: center;

      .host_logo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
        border: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 30rpx;
          border: 0;
        }
      }

      text {
        font-family: PingFang-SC-Medium;
        font-size: 30rpx;
        line-height: 60rpx;
        margin-left: 20rpx;
        color: #cccccc;
        vertical-align: middle;
      }
    }
  }

  .content_btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    margin: 35rpx auto 0;
    background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    border-radius: 40rpx;

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      margin: auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      color: #000;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      font-weight: bold;
      border-radius: 40rpx;
    }
  }

  .end_btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    margin: 35rpx auto 0;
    border-radius: 40rpx;

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      margin: auto;
      background-color: #737373;
      color: #000;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      font-weight: 500;
      border-radius: 40rpx;
    }
  }
}

.fixed_tabbar {
  bottom: calc(var(--window-bottom));
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  background-color: rgba(36, 36, 36, 0.8);
  position: fixed;

  .content {
    display: flex;
    justify-content: space-between;
    line-height: 80rpx;
    width: 90%;
    margin: auto;

    .notice_text {
      font-size: 22rpx;
      color: #ffffff;
    }

    .method_btn {
      height: 40rpx;
      margin: 20rpx 0;
      background-color: #4ffffe;
      border-radius: 22rpx;
      line-height: 40rpx;
      text-align: center;

      button {
        background-color: #4ffffe;
        border-radius: 22rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 22rpx;
        border: 0;
      }
    }
  }
}

/*登录弹框*/

.showLoginMask {
  width: 600rpx;
  margin: auto;
  font-weight: bold;
  .title {
    font-size: 36rpx;
    padding: 30rpx 0;
    font-weight: bold;
    text-align: center;
  }

  .subTitle {
    font-size: 22rpx;
    text-align: center;
    color: #999999;

    text {
      font-weight: bold;
      color: #999999;
    }
  }

  .input {
    display: flex;
    flex-direction: column;
    width: 85%;
    font-size: 26rpx;
    margin: 60rpx auto 0;

    .phone {
      display: flex;
      width: 100%;
      padding-bottom: 5rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1rpx solid #ccc;

      select {
        width: 120rpx;
        background: none;
        border: 0;
        font-weight: bold;
      }

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 45%;
        margin: 0 20rpx;
      }

      button {
        width: 130rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 15rpx 0;
        font-size: 20rpx;
        font-weight: 300;
        background-color: #4effff;
        border-radius: 20rpx;
        border: 0;
        padding: 0;
      }
    }

    .code {
      display: flex;
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      padding-bottom: 5rpx;
      border-bottom: 1rpx solid #ccc;

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin-left: 20rpx;
      }
    }
  }

  .submit_btn {
    width: 85%;
    margin: 70rpx auto 30rpx;
    height: 80rpx;
    border: 0;

    button {
      height: 80rpx;
      line-height: 80rpx;
      margin: 30rpx auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 36rpx;
      font-size: 24rpx;
      border: 0;
    }
  }

  .agree_read {
    width: 100%;
    margin: auto;
    font-size: 22rpx;
    letter-spacing: -1rpx;
    color: #999999;
    padding-bottom: 80rpx;
    text-align: center;

    text {
      color: dodgerblue;
    }
  }
}

// 注册弹窗
.showRegisterMask {
  width: 600rpx;
  margin: auto;
  padding: 40rpx 0 20rpx 0;

  .content_text {
    width: 80%;
    margin: 50rpx auto;
    font-size: 26rpx;
    color: #4d4d4d;
  }
}

.watermark {
  width: 260rpx;
  height: 48rpx;
  padding: 62rpx 0;
  margin: auto;
}

/deep/ uni-radio-group {
  display: inline !important;
}
/* swiper修改指示点样式 */
/deep/ uni-swiper .uni-swiper-dot {
  width: 6rpx !important;
  height: 6rpx !important;
  border-radius: 100%;
}

/deep/ uni-swiper .uni-swiper-dot-active {
  background-color: #fff !important;
  width: 20rpx !important;
  border-radius: 5rpx !important;
}
</style>
